<template>
  <div class="q-pa-sm my-card">
    <div class="order-extra-area">
      <div class="page-header q-pa-sm">Check In / Out</div>
    </div>
    <q-card class="search-css card-radius" >
      <q-tabs
        v-model="tab"
        dense
        active-color=""
        activeBgColor="white"
        indicator-color="primary"
        content-class="tabs-css"
        align="justify"
        narrow-indicator
        @update:model-value="changeTab"
      >
        <q-tab class="tab-1" name="checkin" label="Check In" />
        <q-tab class="tab-2" name="checkout" label="Check Out" />
      </q-tabs>

      <q-tab-panels v-model="tab" animated>
        <q-tab-panel name="checkin">
          <div class="row">
            <div class="text-sm q-pa-sm col-5">
              <div class="row">
                <div class="col-4 fac">Stock Code:</div>
                <div class="col-8">
                  <q-input
                    input-class="input-css"
                    borderless
                    dense
                    v-model="stockCode"
                  ></q-input>
                </div>
              </div>
            </div>

            <div class="text-sm q-pa-sm col-5">
              <div class="row">
                <div class="col-4 fac">Serial No:</div>
                <div class="col-8">
                  <q-input
                    input-class="input-css"
                    borderless
                    dense
                    v-model="serialNo"
                  ></q-input>
                </div>
              </div>
            </div>

            <div class="text-sm q-pa-sm col-2 fac">
              <q-icon
                name="qr_code"
                size="40px"
                color="primary"
                @click="scanDiag = true"
              ></q-icon>
              <q-dialog v-model="scanDiag">
                <OpenCam @submit="(v) => onSubmit(v)"></OpenCam>
              </q-dialog>
            </div>

            <div v-if="data.length == 0" class="warning-text">
              {{ 'NO RECORD. PLEASE TRY AGAIN OR CREATE NEW QR CODE' }}
            </div>
            <q-card-actions align="center" class="col-12">
              <q-btn class="default-btn" @click="search" :loading="searchLoading">Search</q-btn>
              <q-btn
                v-if="data.length == 0"
                class="default-btn"
                @click="$router.push('/partsMaster')"
                >New QR Code</q-btn
              >
            </q-card-actions>
          </div>
        </q-tab-panel>

        <q-tab-panel name="checkout">
          <div class="row">
            <div class="text-sm q-pa-sm col-5">
              <div class="row">
                <div class="col-4 fac">Stock Code:</div>
                <div class="col-8">
                  <q-input
                    input-class="input-css"
                    borderless
                    dense
                    v-model="stockCode"
                  ></q-input>
                </div>
              </div>
            </div>

            <div class="text-sm q-pa-sm col-5">
              <div class="row">
                <div class="col-4 fac">Serial No:</div>
                <div class="col-8">
                  <q-input
                    input-class="input-css"
                    borderless
                    dense
                    v-model="serialNo"
                  ></q-input>
                </div>
              </div>
            </div>
            <div class="text-sm q-pa-sm col-2 fac">
              <q-icon
                name="qr_code"
                size="40px"
                color="primary"
                @click="scanDiag = true"
              ></q-icon>
              <q-dialog v-model="scanDiag">
                <OpenCam @submit="(v) => onSubmit(v)"></OpenCam>
              </q-dialog>
            </div>

            <div v-if="readyParts.length == 0" class="warning-text">
              {{ 'NO RECORD. PLEASE TRY AGAIN' }}
            </div>
            <q-card-actions align="center" class="col-12">
              <q-btn class="default-btn" @click="searchReadyCheckOutParts" :loading="checkOutLoading"
                >Search</q-btn
              >
            </q-card-actions>
          </div>
        </q-tab-panel>
      </q-tab-panels>
    </q-card>
    <div v-if="data.length > 0">
      <CheckInItemTable :data="data"></CheckInItemTable>
    </div>
    <div v-if="readyParts.length > 0">
      <ReadyCheckoutList
        :data="readyParts"
        @update="searchReadyCheckOutParts"
      ></ReadyCheckoutList>
    </div>
  </div>
</template>

<script setup lang="ts">
import { searchPart, getParts } from 'src/services/partsService';
import CheckInItemTable from 'src/components/checkInOut/CheckInItemTable.vue';
import ReadyCheckoutList from 'src/components/checkInOut/ReadyCheckoutList.vue';
import { ref } from 'vue';
import { usePartsStore } from 'src/stores/partsStore';
import { Parts, OrderPart } from 'src/services/type';
import OpenCam from 'src/components/OpenCam.vue';
import { searchCanCheckoutParts } from 'src/services/repairService';
import { parsePartQR } from 'src/utils/parseQRCodeUtils';

const tab = ref('checkin');
const stockCode = ref('');
const serialNo = ref('');
const scanDiag = ref(false);

const data = ref<Parts[]>([]);
const readyParts = ref<OrderPart[]>([]);

const searchLoading = ref(false);
const checkOutLoading = ref(false);

async function search() {
  try {
    searchLoading.value = true;
    const res = await searchPart(stockCode.value, serialNo.value);
    readyParts.value = [];
    if (res.data) {
      data.value = res.data.filter((i: Parts) => {
        return (
          (i.last_status != 'CHECKED IN' &&
            i.last_status != 'COMPLETE' &&
            i.last_status != 'COMPLETE*') ||
          i.last_check_out != null
        );
      });
    }
  } catch (error) {
    
  }finally {
    searchLoading.value = false;
  }
}

async function searchReadyCheckOutParts() {
  try {
    checkOutLoading.value = true;
    const res = await searchCanCheckoutParts(stockCode.value, serialNo.value);
    data.value = [];
    if (res.data) {
      readyParts.value = res.data;
    }
  } catch (error) {
    
  }finally {
    checkOutLoading.value = false;
  }
}

function changeTab() {
  readyParts.value = [];
  data.value = [];
  stockCode.value = '';
  serialNo.value = '';
}

async function onSubmit(v: string) {
  const obj = await parsePartQR(v);
  console.log(obj);
  
  if (obj){

    stockCode.value = obj.CAT;
    serialNo.value = obj.SN;
    scanDiag.value = false;
  }
  search();
}
</script>

<style scoped>
/* .card-one {
  padding-right: 15px;
}

.content {
  display: flex;
  justify-content: space-between;
  background-color: #eef4fa;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 10px;
} */

.warning-text {
  color: red;
  font-weight: bold;
  text-align: center;
  width: -webkit-fill-available;
  padding-top: 20px;
}
</style>
